// 扩大动画数据元素
const el_eecDuration = document.getElementById('eec-duration');
const el_eecHeight = document.getElementById('eec-height');
const el_eecContent = document.getElementById('eec-content');
const DEFAULT_HEIGHT = 80;
let expandAnimation = null; // 动画对象，存储动画控制器
let collapseAnimation = null; // 收缩动画对象

// 扩大动画完成处理
function expandFinish () {
  collapseAnimation.play();
}

// 收缩动画的完成处理
function collapseFinish () {
  expandAnimation.removeEventListener('finish', expandFinish);
  collapseAnimation.removeEventListener('finish', collapseFinish);
}

// 扩大元素示例动画驱动
const eecAnimationDrive = (e) => {
  const duration = parseFloat(document.getElementById('eec-duration-input').value);
  const height = parseFloat(document.getElementById('eec-height-input').value);
  const expandEasing = document.getElementById('ecc-expand-easing').value;
  const collapseEasing = document.getElementById('ecc-collapse-easing').value;
  
  el_eecDuration.innerText = duration + 's';
  el_eecHeight.innerText = height + 'px';

  if (e === 'init') return; // 初始化无需执行动画

  expandAnimation = el_eecContent.animate(
    [
      { height: DEFAULT_HEIGHT + 'px' },
      { height: DEFAULT_HEIGHT + height + 'px' }
    ],
    {
      duration: duration * 1000,
      easing: expandEasing,
      iterations: 1
    }
  )

  collapseAnimation = el_eecContent.animate(
    [
      { height: DEFAULT_HEIGHT + height + 'px' },
      { height: DEFAULT_HEIGHT + 'px' }
    ],
    {
      duration: duration * 1000,
      easing: collapseEasing,
      iterations: 1
    }
  )
  collapseAnimation.finish();

  expandAnimation.addEventListener('finish', expandFinish);
  collapseAnimation.addEventListener('finish', collapseFinish);
}

// 事件绑定
document.getElementById('eec-duration-input').addEventListener('change', eecAnimationDrive);
document.getElementById('eec-height-input').addEventListener('change', eecAnimationDrive);
document.getElementById('ecc-expand-easing').addEventListener('change', eecAnimationDrive);
document.getElementById('ecc-collapse-easing').addEventListener('change', eecAnimationDrive);


eecAnimationDrive('init');